<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<style type="text/css" media="screen">
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		html,body{
			width: 100%;
			height: 100%;

		}
		.page{
			position: relative;
			width: 100%;
			height: 100%;
			overflow:hidden;
		}
		.wrap{
			position: relative;
			width: 100%;
			overflow: hidden;
		}
		.list{
			width: 100%;
			height: 200px;
			overflow:hidden;

		}
		.list li{
			height: 100%;
			float: left;
			line-height:200px;
			text-align: center;
			font-size: 40px;
			color: #fff;
		}
		.list li:nth-of-type(1){
			background-color: red;
		}
		.list li:nth-of-type(2){
			background-color: blue;
		}
		.list li:nth-of-type(3){
			background-color: orange;
		}
		.list li:nth-of-type(4){
			background-color: red;
		}
		.list li:nth-of-type(5){
			background-color: blue;
		}
		.list li:nth-of-type(6){
			background-color: orange;
		}
		.nav{
			position: absolute;
			left: 0;
			bottom: 14px;
			width: 100%;
			height: 10px;
			overflow:hidden;
			text-align: center;
		}
		.nav span{
			display: inline-block;
			vertical-align: top;
			width: 10px;
			height: 100%;
			border-radius: 50%;
			background-color:#f3f3f3;
		}
		.nav .active{
			background-color: #6f0;
		}
		.textList li{
			font-size: 16px/36px "微软雅黑";
			border-bottom: 1px solid #333;
			background-color: #f1f1f1;
		}
	</style>
</head>
<body>
	<div class="page">
		<div class="scroller">
			<div class="wrap">
				<ul class="list">
					<li>1</li>
					<li>2</li>
					<li>3</li>
				</ul>
				<nav class="nav">
					<span class="active"></span>
					<span></span>
					<span></span>
				</nav>
			</div>
			<ul id="textList" class="textList"></ul>
		</div>
	</div>
	<script type="text/javascript" src="css.js"></script>
	<script type="text/javascript">

		;(function(){
			var list = document.querySelector('#textList');
			console.log(list);
			var inner = '';
			for(var i = 0; i < 50; i++){
				inner+='<li>'+ i +'</li>'
			}

			list.innerHTML = inner;
		})();
		;(function(){
			var wrap = document.querySelector('.wrap');
			var list = document.querySelector('.list');

			var aLi = list.children;
			list.innerHTML+=list.innerHTML;


			list.style.width = aLi.length * wrap.clientWidth + 'px';
			for(var i = 0; i < aLi.length; i++){
				aLi[i].style.width = wrap.clientWidth + 'px';
			}
		})();




		;(function(){
			var page = document.querySelector('.page');
			var wrap = document.querySelector('.wrap');
			var list = document.querySelector('.list');
			var imgs = list.querySelectorAll('li');
			var navs = document.querySelectorAll('.nav span');
			var imgW = wrap.clientWidth;
			var now = 0;
			var timer = null;

			swiper({
				wrap:page,
				dir:'y'
			})


			swiper({
				wrap:wrap,
				dir:'x',
				start:function(){
					list.style.transition = 'none';
					
					var nowX = css(list,'translateX');
					now = Math.round(Math.abs(nowX / imgW));

					if(now == 0){
						now = imgs.length / 2;
					}else if(now==imgs.length - 1){
						now = imgs.length / 2 -1;
					}

					var targetX = -(now * imgW);

					css(list,'translateX',targetX);
					clearInterval(timer);

				},
				end:function(){
	
					//获取手指抬起时，移动的距离
					var nowX = css(list,'translateX');
					now = Math.round(Math.abs(nowX / imgW));

					var targetX = -(now * imgW);

					list.style.transition = '.3s';

					css(list,'translateX',targetX);

					for(var i = 0; i < navs.length; i++){
						navs[i].className = '';
					}
					navs[now % navs.length].className = 'active';
					//auto();
				}
			});

			//auto();

			function auto(){
				timer = setInterval(function(){
	
					if(now==imgs.length - 1){
						now = imgs.length / 2 -1;
						list.style.transition = 'none';
						css(list,'translateX',-(now * imgW));
						
					}

					now++;
					setTimeout(function(){
						list.style.transition = '.3s';
						css(list,'translateX',-(now * imgW));
					},50);
					

					for(var i = 0; i < navs.length; i++){
						navs[i].className = '';
					}
					navs[now % navs.length].className = 'active';

					


				}, 1000);
			}


			function swiper(init){

				var wrap = init.wrap;
				var scroll = wrap.children[0];
				var startPoint = {};
				var lastPoint = {};
				var startEl = {};
				var isFirst = true;
				var dir = init.dir;
				var dirTranslate = {
					x:'translateX',
					y:'translateY'
				};
				var isDir = {
					x:false,
					y:false,
				};
				css(scroll,'translateX',0);
				css(scroll,'translateY',0);
				css(scroll,'translateZ',0.01);

				wrap.addEventListener('touchstart',function(e){
					init.start && init.start.call(wrap,e);
					var touch = e.changedTouches[0];
					startPoint = {
						x:touch.clientX,
						y:touch.clientY
					}

					lastPoint = {
						x:touch.clientX,
						y:touch.clientY
					}

					startEl = {
						x:css(scroll,'translateX'),
						y:css(scroll,'translateY'),
					}
				},false);

				wrap.addEventListener('touchmove',function(e){
					var touch = e.changedTouches[0];
					var nowPoint = {
						x:touch.clientX,
						y:touch.clientY
					};

					
					if(lastPoint.x==nowPoint.x && lastPoint.y==nowPoint.y){
						return;
					}

					//差距
					var dis = {
						x:nowPoint.x - startPoint.x,
						y:nowPoint.y - startPoint.y
					};

					if(isFirst){
						if(Math.abs(dis.x) > Math.abs(dis.y)){
							isDir.x = true;
							isDir.y = false;
						}else{
							isDir.x = false;
							isDir.y = true;
						}
						isFirst = false;
					}



					//要移动的目标距离
					var target = {
						x:startEl.x + dis.x,
						y:startEl.y + dis.y
					};


					if(isDir[dir]){
						e.preventDefault();
						css(scroll,dirTranslate[dir],target[dir]);
					}

					lastPoint.x = nowPoint.x;
					lastPoint.y = nowPoint.y;
					
				},false);

				wrap.addEventListener('touchend',function(e){
					init.end && init.end.call(wrap,e);
					isDir = {
						x:false,
						y:false,
					};
					isFirst = true;
				},false);




			}






		})();
	</script>
</body>
</html>
